import { ref, watch } from 'vue';
import { h, resolveComponent } from 'vue';

import { defineComponent } from 'vue';

//在模板语法中 我们直接用comoponent就行，在tsx中我们需要用到resolveComponent
export default defineComponent({
  name: 'Icons',
  props: { name: { type: [String] } },
  setup(props) {
    const { name } = props;
    const iconName = ref(name);
    watch(
      () => props.name,
      (newVal) => {
        iconName.value = newVal;
      },
    );

    return () => {
      return h(resolveComponent(iconName.value!));
    };
  },
});
